<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>360全景图片</title>
		<style type="text/css">
			/*
			 * 去除浏览器默认样式
			 */
			*{
				margin: 0;
				padding: 0;
			}
			
			/*
			 * 设置图片样式
			 */
			#carImg{
				width: 100%;
			}
			
			body{
				overflow: hidden;
			}
			
		</style>
	</head>
	<body>
		<!-- 引入图片 -->
		<img id="carImg" src="img/car/0.jpg" />
		
		<!-- 编写js代码 -->
		<script type="text/javascript">
			/*
			 * 360全景图片
			 * 	功能: 根据鼠标拖动的不同方向切换不同的图片
			 * 	步骤:
			 * 		1. 当鼠标按下时, 开始功能 onmousedown
			 * 		2. 当鼠标移动时, 切换图片 onmousemove
			 * 		3. 当鼠标松开时, 功能停止 onmouseup
			 */
			
			var imgArr = []
			for (var i = 0; i < 60; i++) {
				var newImg = new Image();
				newImg.src = "img/car/" + i + ".jpg"
				imgArr.push(newImg);
			}
			
			
			// 保存当前图片的索引
			var currImgIndex = 0
			
			document.onmousedown = function(event){
				// 获取到鼠标的移动距离
				var dis = 0
				// 获取鼠标的水平坐标
				var begin = event.clientX

				
				// 为document绑定一个鼠标一定那个事件
				document.onmousemove = function(event){
					carImg = document.getElementById("carImg")
					
					var current = event.clientX
					dis = currImgIndex + Math.floor((begin - current) / 30)
					dis = dis % 60
					if(dis < 0){
						dis += 60
					}

					carImg.src = "img/car/" + dis + ".jpg"
				}
				
				document.onmouseup = function(){
										console.log(dis)
					currImgIndex = dis
					document.onmousemove = null
					document.onmouseup = null
					
				}
				
				return false
			}
		</script>
	</body>
</html>
